<!--
 * @Author: your name
 * @Date: 2021-06-20 16:16:24
 * @LastEditTime: 2021-06-22 15:32:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \totiao\src\components\ArtList\ArtList.vue
-->
<template>
  <div>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :disabled="finished"
    >
      <!-- 上拉加载更多 -->
      <!--  :immediate-check="false" 防止刚进入就触发事件 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <!-- 循环生成文章的item项组件 -->
        <Artitem
          v-for="item in artList"
          :key="item.art_id"
          :article="item"
          @remove-article="removeArticle"
        ></Artitem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArtListApi } from '../../api/homeApi'
import Artitem from '../../components/Artitem/Artitem.vue'
export default {
  name: 'ArtList',
  // 为文章列表组件,封装名为channelId的props,表示要加载那个频道下订单文章列表数据
  props: {
    channelId: {
      type: Number,
      required: true
    }
  },
  components: {
    Artitem
  },
  data () {
    return {
      // 文章列表的数据
      artList: [],
      // 调用api的接口要传递的时间戳
      timestamp: Date.now(),
      // 是否正在加载数据
      loading: false,
      // 所以数据是否加载完毕
      finished: false,
      // 是否正在下拉刷新
      isLoading: false
    }
  },
  created () {
    this.initArtList()
  },
  methods: {
    // 初始化文章的列表数据
    // isPullDown是一个布尔值,如果为true,表示用户执行的'下拉刷新'的动作
    async initArtList (isPullDown) {
      const { data: res } = await getArtListApi(this.channelId, this.timestamp)
      console.log(res)
      if (res.message === 'OK') {
        // 数据请求成功之后,要做俩件事
        // 1.为timestamp赋值
        this.timestamp = res.data.pre_timestamp

        // 2.为artList赋值
        if (isPullDown) {
          // 下拉刷新
          // this.artList = [...新数据,...旧数据]
          this.artList = [...res.data.results, ...this.artLis]
        } else {
          // 上拉刷新
          // this.artList = [...旧数据,...新数据]
          this.artList = [...this.artList, ...res.data.results]
        }

        // 当数据请求回来以后,一定要把loading重置为false
        this.loading = false
        // 把isLoading 重置为false ,否则无法触发下次的下拉刷新效果
        this.isLoading = false

        // 判断所以数据是否加载完
        if (res.data.pre_timestamp === null) {
          this.finished = true
        }
      }
    },

    // 触动了上拉加载更多的load事件
    onLoad () {
      console.log('上拉加载更多')
      // 请求回来,拼接数据
      this.initArtList()
    },
    // 移除文章
    removeArticle (id) {
      console.log(id)
      this.artList = this.artList.filter(item => item.art_id !== id)
      // 每次删除了一条文章数据之后,立即判断剩下的数据条数是否小于10
      // 如果小于10,则自动请求下一页数据,防止页面空白,导致上拉加载更多
      if (this.artList.length < 10) {
        this.initArtList()
      }
    },
    // 触发了下拉刷新
    onRefresh () {
      console.log('下拉刷新')
      // 请求下拉刷新的数据,并且把请求到的数据拼接到头部
      this.initArtList()
    }
  }
}
</script>

<style>
</style>
